<template>
    <el-form ref="form" label-width="100" :model="model" :rules="rules">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="头像" prop="headImg">
                    <AvatarUploader v-model="model.headImg" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请填写姓名" v-model="model.name" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="昵称" prop="nickName">
                    <el-input placeholder="请填写昵称" v-model="model.nickName" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                    <el-input placeholder="请填写用户名" v-model="model.username" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请填写密码" v-model="model.password" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="角色" prop="roleIdList">
                    <RoleSelect v-model="model.roleIdList" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="手机号码" prop="phone">
                    <el-input placeholder="请填写手机号码" v-model="model.phone" max-length="11" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                    <el-input placeholder="请填写邮箱" v-model="model.email" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" rows="4" placeholder="请填写备注" v-model="model.remark" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="状态">
                    <el-radio-group v-model="model.status">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item>
                    <div style="width:100%;text-align:right">
                        <el-button type="default" @click="handleCancel">
                            取消
                        </el-button>
                        <el-button type="primary" @click="handleConfirm">
                            确认
                        </el-button>
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import { addUser, updUser } from "@/api/user";
import AvatarUploader from "@/components/avatar-uploader/index.vue";
import RoleSelect from "@/components/role-select/index.vue"
export default {
    components: {
        AvatarUploader,
        RoleSelect,
    },
    data() {
        return {
            model: {
                id: 0,
                headImg: '',
                name: '',
                nickName: "",
                username: "",
                password: "",
                roleIdList: "",
                status: 1,
                remark: "",
                email: "",
                phone: "",
            },
            rules: {
                name: [{ required: true, message: "必填" }],
                nickName: [{ required: true, message: "必填" }],
                userName: [{ required: true, message: "必填" }],
                password: [{ required: true, message: "必填" }],
                roleIdList: [{ required: true, message: "必填" }],
                phone: [{ pattern: /^1\d{10}$/, message: "请输入正确的手机号", maxLength: 11 }],
                email: [{ type: "email", message: "请输入正确的邮箱" }],
            },
        };
    },

    computed: {
        // 是否是编辑模式
        isEditMode() {
            return this.model.id !== 0;
        }
    },

    methods: {
        handleCancel() {
            // 通知父组件我取消了
            this.$emit('cancel');
        },
        async handleConfirm() {
            // 表单校验
            await this.$refs.form.validate();
            // 根据isEditMode判断是否是编辑模式
            if (this.isEditMode) {
                await updUser(this.model);
            } else {
                const { id, ...model } = this.model
                await addUser(model);
            }

            // 通知父组件我确认了
            this.$emit('success');
        },
        setModel(data) {
            // 缺少rowIdList数据，导致角色编辑模式下角色栏无法正常回显 
            Object.assign(this.model, data);
        }
    }
}
</script>